<template>
    <div style="display:inline-block;padding:0 6px;padding-top: 1px;">
        <el-dropdown @command="setThemeProps" placement="bottom-start">
            <!-- <a href="javascript:void(0)">
                <i :style="{marginTop: '-2px', verticalAlign: 'middle'}" color="#495060" :size="18" class="el-icon-magic-stick"></i>
                <i class="el-icon-arrow-down"></i>
            </a> -->
            <span class="el-dropdown-link">
             <!-- <el-tooltip content="皮肤切换" placement="bottom" effect="dark">    -->
                <span style="font-size: 20px;"><i class="el-icon-orange"></i></span>
             <!-- </el-tooltip> -->
             <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
           </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in themeList" :key="index"  :command="item">
                    <el-row type="flex" justify="center" align="middle" >
                        <span :style="{color:item.bagColor}"><i class="el-icon-orange"></i></span>
                        <span style="margin-right:10px;">{{item.name}}</span> 
                    </el-row>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
export default {
    name: 'themeSwitch',
    props:{
       setTheme:{
          type:Function
       },
       themeColor:{
          type:Object,
          default:{}
       }
    },
    data () {
        return {
            themeList: [
                {
                    name: '主题一',
                    fontColor: '#333',
                    bagColor: '#fff'
                },
                {
                    name: '主题二',
                    fontColor: '#fff',
                    bagColor: '#eeeff3'
                },
                {
                    name: '主题三',
                    fontColor: '',
                    bagColor: '#CDD8EA'
                },
                {
                    name: '主题四',
                    fontColor: '#CDD8EA',
                    bagColor: '#2d8cf0'
                },
                {
                    name: '主题五',
                    fontColor: '#CDD8EA',
                    bagColor: '#00a854'
                },
                {
                    name: '主题六',
                    fontColor: '#CDD8EA',
                    bagColor: '#e96500'
                },
                
            ]
        };
    },
    methods: {
        setThemeProps(command){
            // console.log(command)
            this.setTheme(command);
        }
    },
    created () {
        
    }
};
</script>
